<template>
	<view>
		<view class="">
			<!-- 已购买，已有结果 -->
			<buy-detail v-if="isReport" :reportData="details" @refresh="refresh"></buy-detail>
			<!-- 已购买，未测评 -->
			<view v-else class="testReport u-margin-20" >
				<view class="title u-text-center">
					<text class="u-font-40 font-b">测评报告</text>
				</view>
				<view class="empty u-text-center">
					<image src="https://app.zbzedu.com/static/WaChat/img/noData.png" mode="" style="width: 292rpx;height: 292rpx;"></image>
				</view>
				<view class="notice u-text-center">
					<view class="">
						<text>暂未找到您的报告结果</text>
					</view>
					<view class="" style="margin: 10rpx 0;" >
						请点击<text class="font-b">开始测评</text>
					</view>
					<view class="">
						如已完成测评，请
						<text class="font-b">刷新报告结果</text>
					</view>
				</view>
				<view class="btns" style="display: flex; justify-content: space-evenly;margin: 40rpx ;">
					<view class="btns u-font-28">
						<view class="btn"  @click="startPince">开始测评</view>
					</view>
					<view class="btns u-font-28">
						<view class="btn">刷新报告结果</view>
						<!-- 生成中显示 -->
						<view class="btn" style="background-color: #F0F0F0;color: #7B7B7B;" v-show="false">报告生成中</view>
					</view>
				</view>
			</view>
		</view>
		<view class="job">
			<!-- 已购买，已有结果，已选职业 -->
			<has-job v-if="isReport"></has-job>
			<view v-else>
				<view class="myGlobalJob">
					<view class="title u-font-40 font-b u-text-center">
						<text>我的目标职业</text>
					</view>
					<view class="name">
						<text>职业名称</text>
					</view>
					<view class="notice">
						<text>您还未添加目标专业，请在完整报告中选择专业进行添加</text>
					</view>
				</view>
				<!-- 我的专业目标 -->
				<view class="myGlobalJob">
					<view class="title u-font-40 font-b u-text-center">
						<text>我的目标专业</text>
					</view>
					<view class="name">
						<text>专业名称</text>
					</view>
					<view class="notice">
						<text>您还未添加目标专业，请在完整报告中选择专业进行添加</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 选科要求 -->
		<view class="choose">
			<view class="chooseBox">
				<text>选科要求</text>
			</view>
		</view>
		<!-- 选科要求 -->
		<view class="choose">
			<view class="chooseBox">
				<text>模拟填报</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from "../../util/api";
	// 已购买，已有结果组件
	import buyDetail from './components/buyDetail'
	// 已选职业组件
	import hasJob from './components/hasJob.vue'
	export default {
		components: {
			buyDetail,
			hasJob
		},
		data() {
			return {
				isReport:[],
				details:""
			};
		},
		onLoad() {
			this.getUserRrport()
		},
		methods: {
			// 获取用户测评报告
			getUserRrport() {
				request({
					url: '/wx/getUserReport',
					method: 'post',
					platfom: 'weixin'
				}).then(res => {
					this.isReport=res.data.expandList
					this.details=res.data
				})
			},
			// 刷新数据报告
			refresh(){
				this.getUserRrport()
			},
			// 跳转到开始测评界面
			startPince(){
				uni.navigateTo({
					url:"/pages/pince/start"
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		padding: 20rpx 0rpx;
		background: #2A6CAC;
		color: #fff;
		border-radius: 23px;
		width: 260rpx;
		text-align: center;
	}

	.myGlobalJob {
		margin-bottom: 40rpx;
	}

	.planContainer {
		.btns {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin: 20rpx;
		}
	}

	.title {
		margin-bottom: 40rpx;
	}

	.name {
		width: 532rpx;
		height: 106rpx;
		line-height: 106rpx;
		background-color: #406FA8;
		text-align: center;
		margin: 0 auto;
		color: #FFFFFF;
	}

	.notice {
		width: 532rpx;
		background-color: #ECEFF0;
		margin: 0 auto;
		text-align: center;
		padding: 10rpx 0;
	}

	.choose {
		margin: 40rpx 0;
	}

	.chooseBox {
		width: 532rpx;
		height: 280rpx;
		border: 1rpx solid #C0C0C0;
		margin: 0 auto;
		line-height: 280rpx;
		text-align: center;
	}
</style>
